<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./jquery.js"></script>
  <title>在线登录系统</title>
  <link rel="stylesheet" href="./01_zjzc.css" />
</head>

<!-- JQuery 动画样式 -->
<script type="text/javascript">
  // DOM加载完执行
  $(function () {
    //隐藏所有的子标题
    $(".nav-menu").each(function () {
      // 循环所有的菜单项 找到子菜单
      $(this).children(".nav-content")
    })
    //给所有的主标题 绑定事件
    $(".nav-title").each(function () {

      $(this).click(function () {
        //点击主标题 子标题展示出来
        //获取当前点点击主标题的子标题
        var navConEle = $(this).parents(".nav-menu").children(".nav-content")
        //判断navConEle的display这个属性是否为none 就是关闭的
        if (navConEle.css("display") != "none") {
          //隐藏 500ms

          navConEle.hide(500)
        } else {
          //展示
          navConEle.show(500)
        }
      })
    })
  })
</script>

<body>
  <div class="content">

    <div class="content-left">
      <div class="left-title">
        <a href="#">在线投票管理系统</a>
      </div>
      <!-- 分割线 -->
      <div class="seg"></div>
      <!-- 菜单栏 整个div包裹起来 -->
      <div class="nav">
        <!-- 每一个菜单栏导航 -->


        <div class="nav-menu">
          <!-- 主标题 -->
          <div class="nav-title">用户管理</div>
          <!-- 子标题 有多个 总的也用一个div包裹-->
          <div class="nav-content">
            <a href="./adminList.html">用户列表</a>
            <a href="./playerList.html">选手列表</a>
          </div>
        </div>

        <div class="nav-menu">
          <!-- 主标题 -->
          <div class="nav-title">比赛管理</div>
          <!-- 子标题 有多个 总的也用一个div包裹-->
          <div class="nav-content">
            <a href="./playList.html">比赛列表</a>
            <a href="./vote.html">投票信息</a>
          </div>
        </div>

      </div>
      <!-- 分割线 -->
      <div class="seg"></div>
    </div>
  </div>

  <!-- 1. 导入CSS的全局样式 -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
  <script src="js/jquery-3.1.1.min.js"></script>
  <!-- 3. 导入bootstrap的js文件 -->
  <!-- <script src="js/bootstrap.min.js"></script>-->
  <style type="text/css">
    td,
    th {
      text-align: center;
    }
  </style>

  <div class="content-rigth">

    <div class="container">
      <h3 style="text-align: center">比赛列表管理</h3>
      <div style="float: left;">
        <form class="form-inline">
          <div class="form-group">
            <label for="exampleInputName2">用户名</label>
            <input name="name" type="text" class="form-control" id="exampleInputName2">
          </div>
          <button id="submit1" type="button" class="btn btn-primary">查询</button>
        </form>
      </div>
      <div style="float: right;margin-bottom: 15px">
        <!-- <a class="btn btn-primary" href="loveMusic.html">喜欢列表</a> -->
        <a class="btn btn-primary" href="upload.html">添加比赛</a>
        <a id="delete" class="btn btn-primary">删除选中</a>
      </div>
      <table border="1" class="table table-bordered table-hover">
        <tr class="success">
          <th>比赛名称</th>
          <th>比赛地点</th>
          <th>比赛时间</th>
          <th>比赛说明</th>
          <th>操作</th>
        </tr>
        <tbody id="info" valign="middle">

        </tbody>
      </table>
    </div>

    <script type="text/javascript">
      // <!-- 核心代码实现 -->
      $(function () {
        load()
      })

      function load () {
        $.ajax({
          url: "/match/find",
          type: "get",
          dataType: "json",
          success: function (obj) {
            var data = obj.date
            var s = ""
            for (var i = 0; i < data.length; i++) {
              //console.log(musicUrl);
              s += '<tr>'
              s += '<td>' + data[i].matchname + '</td>'
              s += '<td>' + data[i].matchaddress + '</td>'
              s += '<td>' + data[i].matchtime + '</td>'
              s += '<td>' + data[i].matchinfo + '</td>'

              s += '<td > <button class="btn btn-primary" onclick="deleteInfo(' + data[i].matchId + ')" >删除</button>' +
                '<button class="btn btn-primary" onclick="loveInfo(' + data[i].matchId + ')" > 修改</button>' +
                '</td>'
              s += '</tr>'
            }
            $("#info").html(s)//把拼接好的页面添加到info的id下

          }
        })
      }



    </script>

  </div>
</body>

</html>